<template>
    <view class="address-item u-p-25 u-flex u-row-between" :class="left_icon ? '' : 'u-border-bottom'">
        <view class="address-icon u-m-r-30 u-font-26" v-if="left_icon">
            <u-icon :name="left_icon" custom-prefix="custom-icon" size="60"></u-icon>
        </view>
        <view class="address-info u-flex-1" @click="left_icon ? handlecheckoutAddress() : handleSelectAddress()">
            <view class="u-m-b-20">
                <text class="add-name u-font-32">{{ name }}</text>
                <text class="add-mobile u-font-30 u-m-l-50">{{ mobile | secrecyMobile }}</text>
                <text class="add-def add-tag u-m-l-20 u-font-20" v-if="def_addr === 1">默认</text>
                <text class="add-ship add-tag u-m-l-20 u-font-20" v-if="tag_name">{{ tag_name }}</text>
            </view>
            <view class="u-font-24">
                <text>{{ addrs }} {{ addr }}</text>
            </view>
        </view>
        <view class="address-icon u-m-l-20" v-if="right_icon" @click="handleEditAddress(addr_id)">
            <u-icon :name="right_icon" size="36"></u-icon>
        </view>
    </view>
</template>

<script>
    /**
     *  收货地址组件
     *
     * ===== 使用场景 ======
     * 地址管理页、确认订单页
     *
     * ===== 参数 =====
     * left_icon        左边图标
     * right_icon       右边图标
     * name             收货人
     * mobile           收货人手机号
     * addr_id          地址id
     * addrs            收货地址
     * addr             详细地址
     * def_addr         默认地址(1是默认)
     * tag_name         标签名
     *
     * ===== 事件 =====
     * @editAddress 编辑地址时触发
     *
     */
	export default {
        props: {
            left_icon: {
                type: String,
                default: ''
            },
            right_icon: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            },
            mobile: {
                type: String,
                default: ''
            },
            addr_id: {
                type: String,
                default: '0'
            },
            addr: {
                type: String,
                default: ''
            },
            addrs: {
                type: String,
                default: ''
            },
            def_addr: {
                type: Number,
                default: 0
            },
            tag_name: {
                type: String,
                default: ''
            }
        },
		methods: {
            handleEditAddress(addr_id) {
                this.$emit('editAddress', addr_id)
            },
            handlecheckoutAddress() {
                this.$emit('checkoutAddress')
            },
            handleSelectAddress() {
                this.$emit('selectAddress')
            }
        }
	}
</script>

<style lang="scss" scoped>
    .address-item {
        width: 100%;
        .address-info {
            .add-name, .add-mobile {
                font-weight: 600;
            }
            .add-tag {
                color: #FFFFFF;
                padding: 0 5rpx 0 5rpx;
                border-radius: 6rpx;
                &.add-def {
                    background-color: #ff5000;
                }
                &.add-ship {
                    background-color: #2979FF;
                }
            }
        }
    }
</style>
